import React from "react";
import styles from "./index.module.scss";
import { Dropdown, MenuProps, Space } from "antd";
import {
  MoreOutlined,
  PoweroffOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { useDispatch, useSelector } from "react-redux";
import { StateType } from "@/store";
import { clearAuth } from "@/store/user/authSlice";
import { useNavigate } from "react-router-dom";

const items: MenuProps["items"] = [
  {
    key: "1",
    label: "个人中心",
    icon: <UserOutlined />,
  },
  {
    key: "2",
    label: "退出登录",
    icon: <PoweroffOutlined />,
  },
];

const TopBar: React.FC = (props) => {
  
  const nav = useNavigate();
  const dispatch = useDispatch();
  const { username } = useSelector((state: StateType) => state.authSlice);

  /** 触发事件 */
  const onClick: MenuProps["onClick"] = ({ key }) => {
    if (key === "1") {
      // 跳转个人中心
      nav('/');
    } else if (key === "2") {
      // 退出登录
      dispatch(clearAuth());
    }
  };

  return (
    <div className={styles.container}>
      <Dropdown menu={{ items, onClick }}>
        <a onClick={(e) => e.preventDefault()}>
          <Space>
            欢迎您，{username}
            <MoreOutlined />
          </Space>
        </a>
      </Dropdown>
    </div>
  );
};

export default TopBar;
